<template>
  <div class="w-full h-[calc(100vh-210px)] px-4 py-2">
    <div class="w-full h-full flex flex-col item-center gap-3 py-2">
      <el-skeleton v-for="item in 5" animated>
        <template #template>
          <div class="flex items-center gap-2" :class="item % 2 === 0 ? 'flex-row' : 'flex-row-reverse'">
            <el-skeleton-item variant="circle" style="width: 40px; height: 40px" />

            <el-skeleton-item
              :variant="item === 4 ? 'image' : 'text'"
              :style="item === 4 ? 'width: 300px; height: 240px' : 'width: 160px; height: 40px'"
            />
          </div>
        </template>
      </el-skeleton>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped></style>
